<template>
    <div class="list">
        <!-- 导航 -->
        <div class="left_nav">
            <div @click="setNav(index)" :class="['unit_nav',defaultNav===index?'navActive':''].join(' ')" v-for="(i,index) in list" :key="index">
                {{i.title}}
                <span v-show="red(index)">{{red(index)}}</span>
            </div>
        </div>
       
        <!-- 列表 -->
        <div ref="father" class="right_list">
            <div :ref="index+'son'" v-for="(i,index) in list" :key="index" class="unit_div">
                <h4>{{i.title}}</h4>
                <p>{{i.subTitle}}</p>
                <div v-for="(j,jndex) in i.shopmenuFoods" :key="jndex" class="unit_small">
                    <img :src="j.imgSrc"/>
                    <div class="des">
                        <div>{{j.name}}</div>
                        <div>{{j.mute}}</div>
                        <div>{{j.price}}</div>
                        <div>
                            <span @click="j.count&&dis(index,jndex)">-</span>
                            {{j.count}}
                            <span @click="add(index,jndex)">+</span>
                            </div>
                    </div>
                </div>
            </div>
        </div>
       
        <!-- 按钮-->
        <div class="btn">
            <div class="num" @click="shopCarIsShow=true">{{allPrice}}</div>
            <div class="submit" >去结算</div>
        </div>


        <!-- 购物车 -->
        <div :class="['shopCar',shopCarIsShow?'shopCarShow':''].join(' ')">
            <div v-for="(i,index) in list" :key="index">
                <div v-show="j.count" class="shopCarUnit" v-for="(j,jndex) in i.shopmenuFoods" :key="jndex">
                    <span>{{j.name}}</span>
                    <span>
                        <span @click="j.count&&dis(index,jndex)">-</span>
                        {{j.count}}
                        <span @click="add(index,jndex)">+</span>
                    </span>
                </div>
            </div>
        </div>


    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return {
            defaultNav:0,
            list:[],
            shopCarIsShow:false
            
        }
    },
    // 计算属性 帮助我们省略很多重复计算
    computed:{
        allPrice(){
            let num = 0;
            this.list.forEach(item=>{
                item.shopmenuFoods.forEach(jtem=>{
                    num+=jtem.count*jtem.price
                })
            })
            return num
        }
    },
    mounted(){
        // 组件在被挂载完成之后 向服务端请求数据
        axios.get('/kfc/list').then(data=>{
            // 增加一个count变量 初始值为0
            data.data.forEach(item=>item.shopmenuFoods.forEach(jtem=>jtem.count = 0))
            // 赋值
            this.list = data.data
        })
    },
    methods:{
       red(index){
            let arr = this.list[index].shopmenuFoods.filter(item=>item.count!==0)
            let num = 0;
            arr.forEach(item=>num += item.count)
            return num
       },
        // 左侧高亮
        setNav(index){
            this.defaultNav = index; 
            let father = this.$refs.father;
            let son    = this.$refs[index+'son'][0].offsetTop;
            this.scrollAnimate(father,son,index) ;
        },
        // 滚动动画
        scrollAnimate(father,son){
            if(father.scrollTop+300<son){
                setTimeout(()=>{
                    father.scrollTop+=300;
                    this.scrollAnimate(father,son)
                },50)
                
            }
            else if(father.scrollTop-300>son){
                setTimeout(()=>{
                    father.scrollTop-=300;
                    this.scrollAnimate(father,son)
                },20)
            }
            else{
                 father.scrollTop = son;
            }
        },
        // 加
        add(i,j){
            ++this.list[i].shopmenuFoods[j].count   
        },

        // 减
        dis(i,j){
            --this.list[i].shopmenuFoods[j].count   
        }
    }
}
</script>
<style scoped>
h4{
    font-size: 14px;
    margin:0;
    padding: 10px;
}
p{
    margin: 5px;
    font-size: 12px;
}
.list{
    position: relative;
}
::-webkit-scrollbar {
  display: none; 
}
.left_nav{
    position: absolute;
    height: 430px;
    width: 100px;
    overflow-y: scroll;  
    z-index: 20; 
}

.unit_nav{
    height: 60px;
    line-height: 20px;
    font-size: 12px;
    padding: 20px 10px;
    background: #f5f5f5;
}

.navActive{
    background: #fff;
}


/* 右边 */
.right_list{
    padding-left: 110px;
    height: 430px;
    width: 100%;
    overflow-y: scroll;  
    position: relative; 
}

.unit_div .unit_small{
    height: 88px;
    margin: 10px 0;
    overflow: hidden;
}
.unit_div .unit_small img{
    height: 100%;
    width:40%;
    float: left;
}
.unit_div .unit_small .des{
    width: 60%;
    float: left;
    height: 88px;
    font-size: 13px;
    line-height: 20px;

}
/* 按钮 */
.btn{
    width: 100vw;
    height: 47px;
    line-height: 47px;
    background: #3b3b3c;
    position: fixed;
    bottom: 0;
    left: 0;
    color: #fff;
    overflow: hidden;
    z-index: 101;
}
.num{
    float: left;
    width: 70%;
    height: 47px;
    line-height: 47px;
}
.submit{
    float: left;
    width: 30%;
    height: 47px;
    line-height: 47px;
}

.shopCar{
    position: fixed;
    height: 200px;
    bottom: -200px;
    width: 100vw;
    left: 0;animation: bottom 2s;
    z-index: 100;
    overflow: scroll;
    background: #fff;

}
.shopCarUnit{
    height: 30px;
}
.shopCarShow{
     bottom: 0px;
}
</style>
